<template lang="html">
  <div class="main-page" id="store-page">
    <!-- 标题 -->
    <!-- <van-nav-bar class="main-header" title="商学院" :left-arrow="true" :fixed="true" :z-index="11" @click-left="onClickLeft"/> -->
    <nav-bar :title="'商学院'"  @goBack="onClickLeft"/>
    <!-- 主体内容 -->
    <div class="main-content has-main-tabbar has-header-space">
      <div class="busines_school_page">
        <div class="busines_banner">
          <img class="banner_img" src="https://mjmh.meijiameihuo.com/wechat/images/member/business_school_banner.png"/>
        </div>
        <div class="busines_box">
          <div class="bussines_mak">
            <div :class="is_fiexd ? 'fiexd' : '' + 'bussines_title'"> 精品课程</div>
          </div>
          <div class="select_category">
            <van-tabs v-model="active" title-active-color="#17273A" title-inactive-color="#17273A" @change="switchTable" sticky :offset-top="offset_top">
              <van-tab v-for="(item, index) in category_list" :title="item.type" v-bind:key="index">
                <div class="chaild_list" v-if="item.child_type.length">
                  <div class="chaild_item">
                    <van-row gutter="20" type="flex" justify="flex-start">
                      <van-col tag="div" span="6" v-for="(child, k) in item.child_type" v-bind:key="k">
                        <span @click="selectCategory(child)" :class="active_children.id ? active_children.id === child.id ? 'acitve' : '' : k === 0 ? 'acitve' : '' ">{{child.name}}</span>
                      </van-col>
                    </van-row>
                  </div>
                </div>
              </van-tab>
            </van-tabs>
          </div>
        </div>
        <div class="ke_list">
          <van-list v-model="loading" error-text="请求失败，点击重新加载" @load="onLoad()" loading-text="正在加载中" :finished="finished">
            <item v-for="(item, index) in article_list" v-bind:key="index" :item="item"></item>
          </van-list>
          <NotData icon="icon_2" txt="暂无更多数据" height="auto" v-if="article_list.length === 0 && !loading"></NotData>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Item from '@/components/merber/busines/item.vue'
import NotData from '@/components/global/not-data.vue'
import NavBar from '@/components/global/nav-bar.vue'

export default {
  components: { Item, NotData, NavBar },
  data () {
    return {
      article_list: [],
      category_list: [],
      is_fiexd: false,
      active: 0,
      loading: true,
      show_catetory: false,
      active_children: {},
      finished: false,
      select_parent: '',
      select_child: '',
      curr_page: 0,
      offset_top: 0,
      chaile_active: 0
    }
  },
  created () {
    this.getCategory()
  },
  beforeUpdate () {
    let dom = document.getElementsByClassName('main-header')
    if (dom && dom[0]) {
      let dh = dom[0].clientHeight || dom[0].offsetHeight
      this.offset_top = dh
    }
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    openCatergory () {
      this.show_catetory = !this.show_catetory
    },
    selectCategory (e) {
      this.active_children = e
      this.select_child = e.id
      this.article_list = []
      this.openCatergory()
      this.getArticleList()
    },
    switchTable (e) {
      this.show_catetory = false
      this.active_children = {}
      this.article_list = []
      this.select_parent = this.category_list[e].id
      if (this.category_list[e].child_type.length) {
        this.select_child = this.category_list[e].child_type[0].id
      }
      this.curr_page = 0
      this.getArticleList()
    },
    onLoad () {
      this.curr_page = this.curr_page + 1
      this.getArticleList()
    },
    getCategory () {
      return new Promise((resolve, reject) => {
        this.$Axios({ url: 'business_article_type', params: { child_type: 'contents' }, method: 'get' }).then((resp) => { // 请求成功
          if (resp.return_code === '0000') {
            this.category_list = resp.data.list
            if (resp.data.list[0].child_type.length) {
              this.select_parent = this.category_list[0].id
              this.select_child = resp.data.list[0].child_type[0].id
              this.getArticleList()
            } else {
              this.select_parent = this.category_list[0].id
              this.getArticleList()
            }
          }
          resolve(resp)
        }).catch((error) => { // 请求失败
          this.$_requestInterceptor('error', error)
          reject(error)
        })
      })
    },
    getArticleList () {
      var data = {}
      if (this.select_child) {
        data = {
          article_type_id: this.select_parent,
          article_type_child_id: this.select_child,
          page: this.curr_page
        }
      } else {
        data = {
          article_type_id: this.select_parent,
          page: this.curr_page
        }
      }
      return new Promise((resolve, reject) => {
        this.$Axios({ url: 'business_school', params: data, method: 'get' }).then((resp) => { // 请求成功
          if (resp.return_code === '0000') {
            this.article_list = this.article_list.concat(resp.data.list)
            if (resp.data.list.length < 10) {
              this.finished = true
            }
          } else {
            this.finished = true
          }
          this.loading = false
          resolve(resp)
        }).catch((error) => { // 请求失败
          this.$_requestInterceptor('error', error)
          reject(error)
        })
      })
    }
  }
}
</script>
